<template>
  <div class="stepBox">
    <el-steps :space="200" :active="active" finish-status="success">
      <el-step title="新建" :description="oneStep"></el-step>
      <el-step title="系统评分" :description="twoStep"></el-step>
      <el-step title="专家评分" :description="threeStep"></el-step>
      <el-step title="排名确认" :description="fourStep"></el-step>
      <el-step title="排名发布" :description="fiveStep"></el-step>
    </el-steps>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
const props = defineProps({
  datas: {
    type: Array,
    default: [],
  },
});
const active = ref(0);
const oneStep = ref("");
const twoStep = ref("");
const threeStep = ref("");
const fourStep = ref("");
const fiveStep = ref("");
const { datas } = toRefs(props);
watch(
  () => props.datas,
  () => {
    active.value = datas.value[0].status;
    if(active.value==4){
      active.value=5
    }
    datas.value.forEach((v, i) => {
      if (v.status == 0) {
        oneStep.value = v.statusTime;
      }
      if (v.status == 1) {
        twoStep.value = v.statusTime;
      }
      if (v.status == 2) {
        threeStep.value = v.statusTime;
      }
      if (v.status == 3) {
        fourStep.value = v.statusTime;
      }
      if (v.status == 4) {
        fiveStep.value = v.statusTime;
      }
    });
  }
);
</script>

<style scoped lang="scss">
:deep(.el-step.is-horizontal) {
  flex-basis: 20% !important;
}
.stepBox {
  padding: 20px 0;
  box-sizing: border-box;
}
</style>
